<template>
  <div>
    <!-- <van-icon name="arrow-left"></van-icon> -->
    <div class="login-form">
      <h3>验证码登录</h3>
      <div class="login-form-item">
        <i class="icon-phone"></i>
        <input
          type="text"
          placeholder="请输入手机号"
          v-model="state.accounts"
        />
      </div>
      <div class="login-form-item">
        <i class="icon-code"></i>
        <input type="text" placeholder="请输入验证码" v-model="state.code" />
        <span @click="getCodeChange">{{ state.codeText }}</span>
      </div>
      <van-button type="primary" @click="loginSubmit">登录</van-button>
      <div class="login-form-label">
        <van-checkbox v-model="state.checked">我已阅读</van-checkbox>
        <router-link to="/login/serviceAgree">《IT》平台xxxxxxx</router-link>和
        <router-link to="/login/privacyPolicy">《隐私保护》</router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { showToast } from "vant";
import { reactive } from "vue";
import { getCode, login } from "../../api/user.ts";
import { useRouter } from "vue-router";
import { userStore } from "../../store/user.ts";
const router = useRouter();
const store = userStore();
const state = reactive({
  checked: false,
  accounts: "",
  code: "",
  codeText: "获取验证码",
  time: 60,
  interTimeCode: null,
});
const getCodeChange = async () => {
  if (state.interTimeCode) return;
  // 入参
  const res = await getCode({
    accounts: state.accounts,
  });
  if (res) {
    console.log(res, "--");
    state.interTimeCode = setInterval(() => {
      state.time--;
      if (state.time <= 0) {
        clearInterval(state.interTimeCode);
        state.time = 60;
        state.codeText = "获取验证码";
      } else {
        state.codeText = `重新发送(${state.time})s`;
      }
    }, 1000);
    state.code = res.code;
  }
};

// 登录
const loginSubmit = async () => {
  if (!state.code) {
    showToast("请输入验证码");
    return;
  }
  if (!state.checked) {
    showToast("请阅读");
    return;
  }
  const res = await login({
    accounts: state.accounts,
    code: state.code,
  });
  if (res.errCode === 200) {
    // window.localStorage.setItem('token',res.data.token)
    // router.push('/task')
    // ------------------

    // 登录成功后需要把登录返回的数据存到store
    store.setUserInfo(res.data);
    console.log(res.data,'--data')
    if (store.role == 1) {
      router.push("/task");
    }
    if (store.role == 2) {
      router.push("/talent");
    }
  } else {
    showToast(res.message);
  }
};
</script>

<style lang="scss" scoped>
.login-form {
  padding: 0 1.07rem;
  h3 {
    font-size: 1.39rem;
    line-height: 1.39rem;
    font-weight: 400;
    color: #333;
    margin-top: 2.35rem;
    margin-bottom: 4rem;
  }
  &-item {
    display: flex;
    font-size: 0.75rem;
    font-weight: 300;
    color: #9fa7ad;
    margin: 0 0.18rem 2rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e7e7e7;
    .icon-phone {
      background: url("@/assets/img/icon/icon-phone.png") no-repeat;
      background-size: 100%;
      width: 1.01rem;
      height: 1.01rem;
    }
    .icon-code {
      background: url("@/assets/img/icon/icon-code.png") no-repeat;
      background-size: 100%;
      width: 1.01rem;
      height: 1.01rem;
    }
    input {
      flex: 1;
      margin-left: 0.48rem;
    }
    span {
      font-size: 0.75rem;
      font-weight: 300;
      color: #fe9527;
      border-left: 1px solid #fe9527;
      line-height: 0.75rem;
      padding-left: 0.56rem;
    }
  }
}
</style>
